<template>
	<div class="register">
		<header :class="{errors:isError}">
			<div class="header_left">
				<img v-if="!isError" src="../../assets/images/abao/abao.png" alt="" />
				<img v-else src="../../assets/images/abao/abao2.png" alt="" />
				<div>
					<h6>阿宝应用号</h6>
					<p>一站式推广营销开放平台</p>
				</div>
			</div>
			<div class="header_right">
				<p @click="$router.push('/homepage')">
					<img v-if="!isError" src="../../assets/images/abao/homepageIcon.png" alt="" />
					<img v-else src="../../assets/images/abao/homepageIcon2.png" alt="" />
					<span>首页</span>
				</p>
				<p @click="logout">
					<img v-if="!isError" src="../../assets/images/abao/logoff.png" alt="" />
					<img v-else src="../../assets/images/abao/logoff2.png" alt="" />
					<span>注销</span>
				</p>
			</div>
		</header>
		<div class="contents">
			<div class="content">
				<div class="process_tabs">
					<p :class="{selected:steps===1}">1选择类型</p>
					<p :class="{selected:steps===2}">2信息登记</p>
					<p :class="{selected:steps===3}">3审核发布</p>
				</div>
				<h6 v-if="steps !== 3">请选择应用号的类型</h6>
				<div class="type_imgs" v-if="steps !== 3">
					<div class="type1" @click="selTypes(1)" :class="{selType:types===1}">
						<h1>媒体运营</h1>
						<p>用户媒体内容发布</p>
						<p>可以将内容和流量进行变现</p>
						<p>推荐公众号和头条号</p>
						<p>百家号等自媒体使用</p>
					</div>
					<div class="type2" @click="selTypes(2)" :class="{selType:types===2}">
						<h1>线上电商</h1>
						<p>打造售卖实体及虚拟商品</p>
						<p>推荐天猫等平台</p>
					</div>
					<div class="type3" @click="selTypes(3)" :class="{selType:types===3}">
						<h1>个人服务</h1>
						<p>打造自己的个性空间</p>
						<p>组建自己的圈子</p>
						<p>可通过多种方式展现和管理</p>
					</div>
					<div class="type4" @click="selTypes(4)" :class="{selType:types===4}">
						<h1>实体商户</h1>
						<p>用户服务类</p>
						<p>O2O类企业及线下门店</p>
						<p>推荐线下门店及美团</p>
						<p>点评商户使用</p>
					</div>
				</div>
				<!-- 信息登记start -->
				<div class="audit_infos" v-if="steps===2">
					<div class="remarks">
						<img src="../../assets/images/abao/remark1.png" alt="" />
						<p>阿宝应用号致力于打造真实、合法、有效的互联网平台。为了更好的保障你和广大阿宝用户的合法权益，请你认真填写登记信息。</p>
						<img src="../../assets/images/abao/remark2.png" alt="" />
					</div>
					<div class="all_infos">
						<h6>信息登记</h6>
						<div class="all_info">
							<div class="name">
								<p>身份证姓名</p>
								<el-input v-model.trim="input1" style="width:512px;font-size:20px;color:#585858;" clearable></el-input>
							</div>
							<div class="explain">信息审核成功后身份证姓名不可修改；如果名字包含分隔号“.” ，请勿忽略。</div>
							<div class="name">
								<p>身份证号码</p>
								<el-input :maxlength="18" v-model.trim="input2" style="width:512px;font-size:20px;color:#585858;" clearable></el-input>
							</div>
							<div class="explain">请输入身份证号码</div>
							<div class="upload_img">
								<p>手持证件照片</p>
								<div class="instance">
									<div class="i_left">
										<img id="showImg" src="../../assets/images/abao/banner.jpg" alt="" />
										<input type="file" @change="onFileChange" style="display:none;" id="upfile" @click.stop='autoClick'>
										<p>参考示例</p>
									</div>
									<h5>身份证上的所有信息清晰可见，必须能看清证件号。照片需免冠，建议未化妆，手持证件人的五官清晰可见照片内容真实有效，不得做任何修改支持jpg jpeg bmp gif格式照片，大小不超过5M选择文件</h5>
								</div>
							</div>
							<button class="upload_btn" @click="autoClick">选择文件</button>
							<div class="name">
								<p>应用号名称</p>
								<el-input v-model.trim="input3" style="width:512px;font-size:20px;color:#585858;" clearable></el-input>
							</div>
							<div class="explain">4-30个字符（1个汉字算2个字符）</div>
							<div class="name">
								<p>功能介绍</p>
								<el-input :maxlength="120" v-model.trim="input4" type="textarea" :rows="5" resize="none" style="width:512px;font-size:20px;color:#585858;" clearable></el-input>
							</div>
							<div class="explain">4-120个字，介绍此应用号功能与特色。</div>
							<div class="name">
								<p>手机号码</p>
								<el-input :maxlength="11" v-model.trim="input5" style="width:512px;font-size:20px;color:#585858;" clearable></el-input>
								<button :class="{blue:input5.length===11&&show1}" @click="getCode">{{ codeText }}</button>
							</div>
							<div class="explain">请输入您的手机号码</div>
							<div class="name">
								<p>短信验证码</p>
								<el-input :maxlength="6" v-model.trim="input6" style="width:512px;font-size:20px;color:#585858;" clearable></el-input>
								<span>无法接收验证码？</span>
							</div>
							<div class="explain">请输入手机短信收到的6位验证码</div>
						</div>
						<div class="footer">
							<button @click="submits">提交审核</button>
							<h5>Power By 木丰众易 Copyright @ 2008-2018 All right Reserved</h5>
						</div>
					</div>
				</div>
				<!-- 信息登记end -->
				<!-- 审核中 -->
				<div class="checking" v-if="steps === 3 && !isError">
					<img src="../../assets/images/abao/checking.png" alt="" />
					<div class="content1">
						<h3>提交成功，请等待审核！</h3>
						<p>预计1-2个工作日审核完毕，审核结果会以短信的形式通知给您！<br/>请留意查收！</p>
						<div class="remarks2">
							<img src="../../assets/images/abao/remark1.png" alt="" />
							<img src="../../assets/images/abao/remark2.png" alt="" />
						</div>
						<h5>Power By 木丰众易 Copyright @ 2008-2018 All right Reserved</h5>
					</div>
				</div>
				<div class="check_error" v-if="steps === 3 && isError">
					<img src="../../assets/images/abao/checkError.png" alt="" />
					<div class="content2">
						<h3>抱歉，您的资料审核未通过！</h3>
						<p>具体原因如下：<span>手持身份证照片模糊不清</span></p>
						<p>请重新修改后提交！</p>
						<button @click="reEdit">重新编辑</button>
						<div class="remarks3">
							<img src="../../assets/images/abao/remark1.png" alt="" />
							<img src="../../assets/images/abao/remark2.png" alt="" />
						</div>
						<h5>Power By 木丰众易 Copyright @ 2008-2018 All right Reserved</h5>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { setCookie, getCookie, removeCookie, clearCookie } from '@/assets/js/cookie.js'
	export default {
		name: 'register',
		data() {
			return {
				steps: 1, //1-选择类型  2-信息登记  3-审核发布
				types: 0, //0-媒体运营  1-线上电商  2-个人服务  3-实体商户 
				input1: '', //身份证姓名
				input2: '', //身份证号码
				imgU: '', //上传图片路径
				input3: '', //应用号名称
				input4: '', //功能介绍
				input5: '', //手机号码
				nums: 60, //倒计时秒数
				codeText: '获取验证码', //获取验证码文字
				show1: true,
				input6: '', //短信验证码	
				isError: false, //审核是否失败
			}
		},
		components: {

		},
		computed: {

		},
		created() {

		},
		methods: {
			//选择类型
			selTypes(id) {
				switch(id) {
					case 1:
						this.types = 1;
						break;
					case 2:
						this.types = 2;
						break;
					case 3:
						this.types = 3;
						break;
					case 4:
						this.types = 4;
						break;
				}
				this.steps = 2;
			},
			//自动点击
			autoClick() {
				document.getElementById("upfile").click();
			},
			//上传文件
			onFileChange($event) {
				//console.log($event);
				if($event.target.files.length == 0) {
					return;
				}
				//图片预览fileReader
				let fr = new FileReader();
				fr.readAsDataURL($event.target.files[0]);
				let that = this;
				let sImg = document.getElementById('showImg');
				fr.onload = function(evt) {
					//console.log(evt);					
					sImg.src = evt.target.result;
					that.imgU = evt.target.result.split(',')[1];
				}
				//console.log(that.imgU);
			},
			//获取验证码
			getCode() {
				if(this.input5.length !== 11) {
					return false;
				}
				if(!(/^1[3|4|5|8][0-9]\d{4,8}$/.test(this.input5))) {
					this.$alert('请输入正确的手机号', '提示');
					return;
				}
				this.show1 = false;
				this.codeText = this.nums + 's后重新获取';
				setInterval(() => {
					this.nums--;
					if(this.nums <= 0) {
						this.nums = 0;
					}
					if(this.nums === 0) {
						this.codeText = '获取验证码';
						this.show1 = true;
					} else {
						this.codeText = this.nums + 's后重新获取';
					}
				}, 1000);
			},
			//提交
			submits() {
				if(this.input1 == '') {
					this.$alert('请输入身份证姓名', '提示');
					return;
				}
				if(!/^[0-9a-zA-Z\u4e00-\u9fa5_]{2,16}$/.test(this.input1)) {
					this.$alert('请输入正确的身份证姓名', '提示');
					return;
				}
				if(this.input2 == '') {
					this.$alert('请输入身份证号码', '提示');
					return;
				}
				if(!(/(^\d{15}$)|(^\d{17}([0-9]|X)$)/.test(this.input2))) {
					this.$alert('请输入正确的身份证号码', '提示');
					return;
				}
				if(this.imgU == '') {
					this.$alert('请上传照片', '提示');
					return;
				}
				if(this.input3 == '') {
					this.$alert('请输入应用号名称', '提示');
					return;
				}
				if(this.strLen(this.input3) < 4) {
					this.$alert('应用号名称长度不能少于4', '提示');
					return;
				}
				if(this.strLen(this.input3) > 30) {
					this.$alert('应用号名称长度不能超过30', '提示');
					return;
				}
				if(this.input4 == '') {
					this.$alert('请输入功能介绍', '提示');
					return;
				}
				if(this.input4.length < 4) {
					this.$alert('功能介绍字数太少', '提示');
					return;
				}
				if(this.input5 == '') {
					this.$alert('请输入手机号码', '提示');
					return;
				}
				if(this.input6 == '') {
					this.$alert('请输入验证码', '提示');
					return;
				}
				let obj = {};
				obj.a1 = this.input1;
				obj.a2 = this.input2;
				obj.a3 = this.imgU;
				obj.a4 = this.input3;
				obj.a5 = this.input4;
				obj.a6 = this.input5;
				obj.a7 = this.input6;
				console.log(obj);
				this.steps = 3;
				this.isError = true;
			},
			//字符串长度（1个汉字算2个字符）
			strLen(str) {
				let realLength = 0;
				let len = str.length;
				let charCode = -1;
				for(let i = 0; i < len; i++) {
					charCode = str.charCodeAt(i);
					if(charCode >= 0 && charCode <= 128) {
						realLength += 1;
					} else {
						realLength += 2;
					}
				}
				return realLength;
			},
			//重新编辑
			reEdit(){
				this.steps = 2;
				this.isError = false;
			},
			//注销
			logout(){
				clearCookie();
				localStorage.clear();
				sessionStorage.clear();
				this.$router.push('/homepage');
			},
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
	.register {
		min-height: 100%;
		background: #e5f1ff;
		padding-bottom: 84px;
		header {
			width: 100%;
			height: 452px;
			background: url('../../assets/images/abao/regBg.png') no-repeat center;
			background-size: 100% 100%;
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			padding: 18px 6%;
			.header_left {
				display: flex;
				align-items: center;
				>img {
					width: 71px;
					height: 66px;
					margin-right: 32px;
				}
				>div {
					h6 {
						font-size: 42px;
						color: #fff;
					}
					p {
						font-size: 20px;
						color: #fff;
					}
				}
			}
			.header_right {
				display: flex;
				align-items: center;
				p:nth-of-type(1) {
					margin-right: 66px;
					img {
						width: 31px;
						height: 28px;
					}
				}
				p:nth-of-type(2) {
					img {
						width: 25px;
						height: 20px;
						margin-top: 8px;
					}
				}
				p {
					display: flex;
					flex-direction: column;
					align-items: center;
					cursor: pointer;
					span {
						font-size: 14px;
						color: #fff;
					}
				}
			}
		}
		.errors {
			background: url('../../assets/images/abao/regBg2.png') no-repeat center;
		}
		.contents {
			margin-top: -330px;
			.content {
				width: 90.69%;
				margin: 0 auto;
				.process_tabs {
					display: flex;
					justify-content: center;
					p {
						font-size: 18px;
						color: #fff;
						padding: 3px 0;
					}
					p:nth-of-type(2) {
						margin: 0 63px;
					}
					.selected {
						color: #f99d00;
						border-bottom: 3px solid #f99d00;
					}
				}
				>h6 {
					font-size: 18px;
					color: #fff;
					font-weight: 400;
					text-align: left;
					margin: 22px 0 26px 0;
				}
				.type_imgs {
					display: flex;
					justify-content: space-around;
					.type1 {
						background: url('../../assets/images/abao/type1.png') no-repeat center;
					}
					.type2 {
						background: url('../../assets/images/abao/type2.png') no-repeat center;
					}
					.type3 {
						background: url('../../assets/images/abao/type3.png') no-repeat center;
					}
					.type4 {
						background: url('../../assets/images/abao/type4.png') no-repeat center;
					}
					.type1,
					.type2,
					.type3,
					.type4 {
						width: 311px;
						height: 416px;
						background-size: 100% 100%;
						display: flex;
						flex-direction: column;
						justify-content: center;
						cursor: pointer;
						&:hover {
							transform: scale(1.03, 1.03);
						}
						h1 {
							font-size: 28px;
							color: #fff;
							font-weight: 500;
							margin: 180px 0 10px 0;
						}
						p {
							font-size: 12px;
							color: #fff;
							margin-top: 10px;
						}
					}
					.selType {
						border: 5px solid #f79d01;
					}
				}
				.audit_infos {
					background: #fff;
					margin-top: -100px;
					padding: 185px 0 30px 0;
					.remarks {
						display: flex;
						justify-content: space-around;
						img {
							width: 250px;
							height: 113px;
						}
						p {
							width: 45%;
							font-size: 19px;
							color: #878787;
						}
					}
					.all_infos {
						h6 {
							width: 94%;
							margin: 0 auto;
							font-size: 22px;
							color: #000;
							font-weight: 400;
							text-align: left;
							padding: 0 0 28px 85px;
							border-bottom: 1px solid #eceff1;
						}
						.all_info {
							padding-top: 46px;
							.name {
								display: flex;
								padding-left: 175px;
								>p {
									width: 132px;
									height: 60px;
									line-height: 60px;
									font-size: 22px;
									color: #585858;
									white-space: nowrap;
								}
								>button {
									width: 196px;
									height: 60px;
									line-height: 60px;
									background: #e7e7eb;
									font-size: 20px;
									color: #939393;
									margin-left: 22px;
									cursor: default;
								}
								>span {
									display: block;
									height: 60px;
									line-height: 60px;
									font-size: 20px;
									color: #2d86d7;
									margin-left: 20px;
									cursor: pointer;
									&:hover {
										text-decoration: underline;
									}
								}
								.blue {
									cursor: pointer;
									background: #5299dd;
									color: #fff;
								}
							}
							.explain {
								padding-left: 305px;
								font-size: 20px;
								color: #999;
								margin: 18px 0 60px 0;
								text-align: left;
							}
							.upload_img {
								display: flex;
								padding-left: 175px;
								>p {
									font-size: 22px;
									color: #585858;
									white-space: nowrap;
								}
								.instance {
									display: flex;
									margin-left: 60px;
									.i_left {
										img {
											width: 80px;
											height: 80px;
										}
										p {
											font-size: 20px;
											color: #999;
										}
									}
									h5 {
										width: 65%;
										font-size: 17px;
										color: #999;
										font-weight: 400;
										margin-left: 15px;
										text-align: left;
									}
								}
							}
							.upload_btn {
								width: 200px;
								height: 62px;
								line-height: 62px;
								background: #999;
								font-size: 24px;
								color: #fff;
								margin: 20px 0 60px 0;
								&:hover {
									opacity: .8;
								}
							}
						}
						.footer {
							width: 94%;
							margin: 0 auto;
							border-top: 1px solid #eceff1;
							padding: 108px 0 0 0;
							button {
								width: 198px;
								height: 60px;
								line-height: 60px;
								background: #5299dd;
								font-size: 20px;
								color: #fff;
								&:hover {
									opacity: .9;
								}
							}
							h5 {
								font-size: 10px;
								color: #c8c8c8;
								font-weight: 400;
								margin-top: 64px;
							}
						}
					}
				}
				.checking {
					>img {
						width: 175px;
						height: 177px;
						margin: 80px 0 36px 0;
					}
					.content1 {
						width: 90.69%;
						margin: 0 auto;
						background: #fff;
						padding: 80px 0 45px 0;
						h3 {
							font-size: 22px;
							color: #000;
							font-weight: 500;
						}
						.remarks2 {
							display: flex;
							justify-content: space-between;
							img {
								width: 250px;
								height: 113px;
							}
						}
						p {
							font-size: 18px;
							color: #868686;
							margin: 42px 0 65px 0;
						}
						h5 {
							font-size: 10px;
							color: #c8c8c8;
							font-weight: 400;
							margin-top: 64px;
						}
					}
				}
				.check_error {
					>img {
						width: 175px;
						height: 177px;
						margin: 80px 0 36px 0;
					}
					.content2 {
						width: 90.69%;
						margin: 0 auto;
						background: #fff;
						padding: 80px 0 45px 0;
						h3 {
							font-size: 22px;
							color: #000;
							font-weight: 500;
						}
						p:nth-of-type(1) {
							font-size: 21px;
							color: #999;
							margin: 58px 0 38px 0;
							span {
								color: #d95d5f;
							}
						}
						p:nth-of-type(2) {
							font-size: 21px;
							color: #999;
						}
						button {
							width: 348px;
							height: 98px;
							line-height: 98px;
							background: #3e8fd9;
							font-size: 29px;
							color: #fff;
							border-radius: 5px;
							margin: 36px 0 0 0;
						}
						.remarks3 {
							display: flex;
							justify-content: space-between;							
							margin-top: -80px;
							img {
								width: 250px;
								height: 113px;
							}
						}
						h5 {
							font-size: 10px;
							color: #c8c8c8;
							font-weight: 400;
							margin-top: 90px;
						}
					}
				}
			}
		}
	}
</style>